<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <!-- <div class="content" onclick="modify()" title="hello">hello world</div> -->

    <!-- <input type="button" value="播放" onclick="change()"> -->

    <!-- <input type="checkbox" name="hobby" id="all" onclick="selectAll()">
    <label for="all">全选</label> <br>
    <input class="option" type="checkbox" name="hobby" id="food" onclick="selectOne()">
    <label for="food">吃饭</label> <br>
    <input class="option" type="checkbox" name="hobby" id="sleep" onclick="selectOne()">
    <label for="sleep">睡觉</label> <br>
    <input class="option" type="checkbox" name="hobby" id="play" onclick="selectOne()">
    <label for="play">玩游戏</label> <br>
    <input class="option" type="checkbox" name="hobby" id="see" onclick="selectOne()">
    <label for="see">刷视频</label> <br> -->

    <div style="font-size: 10px;" onclick="changeSize()">hello world</div>
    <script>
        // 需求：点击修改字体大小
        function changeSize() {
            let div = document.querySelector('div');
            div.style.fontSize = parseInt(div.style.fontSize) + 10 + "px";
        }


        // // 需求：当点击全选时，需要将所有的都选上
        // function selectAll() {
        //     let all = document.querySelector('#all');
        //     // console.log(all.checked);
        //     let options = document.querySelectorAll('.option');
        //     for (let i = 0; i < options.length; i++) {
        //         options[i].checked = all.checked;
        //     }
        // }

        // // 需求
        // // 当点击其中一个取消时，将全选给置为取消
        // // 当所有的选项都选中时，将全选给选上
        // function selectOne() {
        //     let all = document.querySelector('#all');
        //     let options = document.querySelectorAll('.option');
        //     let i = 0;
        //     for (; i < options.length; i++) {
        //         if (!options[i].checked) {
        //             all.checked = false;
        //             break;
        //         }
        //     }
        //     if (i == options.length) {
        //         all.checked = true;
        //     }
        // }

        // // 需求：点击播放之后，按钮文本切换为 暂停
        // function change() {
        //     // 判断按钮的value属性是啥。如果是播放，就切换为暂停；反之，则切换为播放
        //     // 注意：在标签内部的不是文本，而是属性
        //     let button = document.querySelector('input');
        //     button.value = (button.value == '播放') ? '暂停' : '播放';
        // }

        // 修改元素属性
        // function modify() {
        //     let div = document.querySelector('.content');
        //     // console.dir(div);
        //     div.title = div.innerText;
        // }

        // 修改整个标签
        // function modify() {
        //     let div = document.querySelector('.content');
        //     console.log(div.innerHTML);
        //     div.innerHTML = '<span>hello world</span>';
        // }

        // 修改文本的内容
        // function modify() {
        //     let div = document.querySelector('.content');
        //     console.log(div.innerText);
        //     div.innerText = 'hello';
        // }
    </script>
</body>

</html>